<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>南方电网PG标准机房动环监控信息化系统V1.0</title>
    <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/static/css/login.css}" media="all"/>
    <style>
        /* 覆盖原框架样式 */
        .layui-elem-quote {
            background-color: inherit !important;
        }

        .layui-input, .layui-select, .layui-textarea {
            background-color: inherit;
            padding-left: 30px;
        }
    </style>
</head>
<body>
<!-- Head -->
<!--<div class="layui-fluid">-->
<!--<div class="layui-row layui-col-space15">-->
<!--<div class="layui-col-sm12 layui-col-md12 zyl_mar_01">-->
<!--<blockquote class="layui-elem-quote">智能物联网关配置系统后台登陆界面</blockquote>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!-- Head End -->

<!-- Carousel -->
<div class="layui-row">
    <div class="layui-col-sm12 layui-col-md12">
        <div class="layui-carousel zyl_login_height" id="zyllogin" lay-filter="zyllogin">
            <div carousel-item="">
                <div>
                    <div class="zyl_login_cont"></div>
                </div>
                <!--<div>-->
                <!--<img th:src="@{/static/img/01.jpg}"/>-->
                <!--</div>-->
                <!--<div>-->
                <!--<div class="background">-->
                <!--<span></span><span></span><span></span>-->
                <!--<span></span><span></span><span></span>-->
                <!--<span></span><span></span><span></span>-->
                <!--<span></span><span></span><span></span>-->
                <!--</div>-->
                <!--</div>-->
                <!--<div>-->
                <!--<img th:src="@{/static/img/03.jpg}"/>-->
                <!--</div>-->
            </div>
        </div>
    </div>
</div>

<!-- LoginForm -->
<div class="zyl_lofo_main">
    <fieldset class="layui-elem-field layui-field-title zyl_mar_02">
        <legend style="font-size: 38px;font-weight: 900;color: #6c6c6c;text-align: center">南方电网PG标准机房动环监控信息化系统V1.0</legend>
    </fieldset>
    <div class="layui-row layui-col-space15">
        <form class="layui-form zyl_pad_01" action="/login" method="post">
            <div class="layui-col-sm12 layui-col-md12" style="margin-top: 20px;font-size: 18px">
                <div class="layui-form-item">
                    <input type="text" id="userName" name="userName" placeholder="账号" class="layui-input" value="admin">
                    <i class="layui-icon layui-icon-username zyl_lofo_icon"></i>
                </div>
                <div class="layui-form-item" th:if="${userfail}">
                    <span style="margin-left: 20px;color: crimson">请输入正确的账号！</span>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md12" style="margin-top: 20px;font-size: 18px">
                <div class="layui-form-item">
                    <input type="password" id="passWord" name="passWord" placeholder="密码" class="layui-input">
                    <i class="layui-icon layui-icon-password zyl_lofo_icon"></i>
                </div>
                <div class="layui-form-item" th:if="${pswfail}">
                    <span style="margin-left: 20px;color: crimson">请输入正确的密码！</span>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md12" style="margin-top: 20px;">
                <button class="layui-btn layui-btn-fluid" type="submit" style="font-size: 20px">立即登录</button>
            </div>
        </form>
    </div>
</div>
<!-- LoginForm End -->


<!-- Jquery Js -->
<script type="text/javascript" th:src="@{/static/js/jquery.min.js}"></script>
<!-- Layui Js -->
<script type="text/javascript" th:src="@{/static/layuiadmin/layui/layui.js}"></script>
<!-- Jqarticle Js -->
<script type="text/javascript" th:src="@{/static/js/jparticle.min.js}"></script>
<!-- ZylVerificationCode Js-->
<script type="text/javascript" th:src="@{/static/js/zylVerificationCode.js}"></script>
<script>
    layui.use(['carousel', 'form'], function () {
        var carousel = layui.carousel
            , form = layui.form;

        //自定义验证规则
        form.verify({
            userName: function (value) {
                if (value.length < 5) {
                    return '账号至少得5个字符';
                }
            }
            , pass: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格']
            , vercodes: function (value) {
                //获取验证码
                var zylVerCode = $(".zylVerCode").html();
                if (value != zylVerCode) {
                    return '验证码错误（区分大小写）';
                }
            }
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });

        // //监听提交
        // form.on('submit(demo1)', function(data){
        // 	layer.alert(JSON.stringify(data.field),{
        // 		title: '最终的提交信息'
        // 	})
        // 	return false;
        // });


        //设置轮播主体高度
        var zyl_login_height = $(window).height() / 1.3;
        var zyl_car_height = $(".zyl_login_height").css("cssText", "height:" + zyl_login_height + "px!important");


        //Login轮播主体
        carousel.render({
            elem: '#zyllogin'//指向容器选择器
            , width: '100%' //设置容器宽度
            , height: 'zyl_car_height'
            , arrow: 'always' //始终显示箭头
            , anim: 'fade' //切换动画方式
            , autoplay: true //是否自动切换false true
            , arrow: 'hover' //切换箭头默认显示状态||不显示：none||悬停显示：hover||始终显示：always
            , indicator: 'none' //指示器位置||外部：outside||内部：inside||不显示：none
            , interval: '5000' //自动切换时间:单位：ms（毫秒）
        });

        //监听轮播--案例暂未使用
        carousel.on('change(zyllogin)', function (obj) {
            var loginCarousel = obj.index;
        });
    });

    function login() {
        var obj = {};
        obj.userName = $("#userName").val();
        obj.passWord = $("#passWord").val();
        $.ajax({
            //请求方式
            type: "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            dataType: 'json',
            //请求地址
            url: "/login",
            //数据，json字符串
            data: JSON.stringify(obj),
            //请求成功
            success: function (res) {
                if (res.data == 200) {
                    window.location.href = "/index";
                } else {
                    alert(res);
                }
            }
        });
    }

</script>
</body>
</html>
